<template>
    <div>
        <div style="margin-bottom: 10px;">
            <span style="margin-right:5px;">设备</span>
            <ClientSelect v-model="alarm_plan_data.client_id" style="width: 200px;margin-right:15px;"></ClientSelect>
            <span style="margin-right:5px;">计划名称</span>
            <Input v-model="alarm_plan_data.plan_name" style="width: 200px;margin-right: 10px;"></Input>
            <span style="margin-right:5px;">是否启用</span>
            <Select v-model="alarm_plan_data.plan_enable" placeholder="选择状态" style="width: 200px;margin-right:15px;">
                <Option value="">全部</Option>
                <Option value="1">启用</Option>
                <Option value="0">禁用</Option>
            </Select>
            <Button type="primary" @click="handleAlarmPlanSearch" style="margin-right: 15px;">搜索</Button>
            <Button @click="handleClearAlarmPlanSearch">重置</Button>
        </div>
        <Table :columns="alarm_plan_data.columns" :data="alarm_plan_data.data" border stripe>
            <template #client_id="{ row }">
                <ClientTableCellValue :client_id="row.client_id" />
            </template>
            <template #plan="{row}">
                <div v-if="row.plan_maxtime > 0">断网超过 {{ row.plan_maxtime }} 秒</div>
                <div v-if="row.plan_maxcount > 0">{{ row.plan_rangetime }} 秒内连续断网 {{ row.plan_maxcount }} 次</div>
            </template>
            <template #plan_time="{row}">
                <div v-if="row.plan_begintime==''">全天</div>
                <div v-else>{{ row.plan_begintime }} - {{  row.plan_endtime }}</div>
            </template>
            <template #plan_email="{ row }">
                <AlarmPlanEmailSwitch :data="row" />
            </template>
            <template #plan_sms="{ row }">
                <AlarmPlanSMSSwitch :data="row" />
            </template>
            <template #plan_enable="{ row }">
                <AlarmPlanEnableSwitch :data="row" />
            </template>
            <template #action="{ row }">
                <AlarmPlanEditButton :data="row" @success="handleGetAlarmPlans" style="margin-right: 5px;" />
                <AlarmPlanDeleteButton :data="row" @success="handleGetAlarmPlans" />
            </template>
        </Table>
        <Page :total="alarm_plan_data.page_total" size="small" show-elevator show-sizer show-total style="margin-top: 10px;" @on-change="handleAlarmPlanPageChange" @on-page-size-change="handleAlarmPlanPageSizeChange" />
    </div>
</template>

<script>
import ClientSelect from './ClientSelect.vue';
import ClientTableCellValue from './ClientTableCellValue.vue';
import AlarmPlanEditButton from './AlarmPlanEditButton.vue';
import AlarmPlanDeleteButton from './AlarmPlanDeleteButton.vue';
import AlarmPlanEnableSwitch from './AlarmPlanEnableSwitch.vue';
import AlarmPlanSMSSwitch from './AlarmPlanSMSSwitch.vue';
import AlarmPlanEmailSwitch from './AlarmPlanEmailSwitch.vue';

export default {
    name: 'AlarmPlanView',
    components: {
        ClientSelect,
        ClientTableCellValue,
        AlarmPlanEditButton,
        AlarmPlanDeleteButton,
        AlarmPlanEnableSwitch,
        AlarmPlanSMSSwitch,
        AlarmPlanEmailSwitch,
    },
    data () {
        return {
            alarm_plan_data: {
                client_id: '',
                plan_id: 0,
                plan_name: '',
                plan_enable: '',
                plan_email: '',
                plan_sms: '',
                columns: [
                    { title: 'ID', key: 'plan_id', width: 100, align: 'center' },
                    { title: '设备ID', slot: 'client_id', width: 200, align: 'center' },
                    { title: '计划名称', key: 'plan_name', align: 'center' },
                    { title: '告警计划', slot: 'plan', align: 'center' },
                    { title: '生效时段', slot: 'plan_time', width: 150, align: 'center' },
                    { title: '邮件', slot: 'plan_email', width: 80, align: 'center' },
                    { title: '短信', slot: 'plan_sms', width: 80, align: 'center' },
                    { title: '启用', slot: 'plan_enable', width: 80, align: 'center' },
                    { title: '操作', slot: 'action', width: 150, align: 'center' }
                ],
                page_total: 40,
                page_size: 10,
                page_current: 1,
                data: []
            },
        }
    },
    methods: {
            handleAlarmPlanSearch() {
                this.alarm_plan_data.page_current = 1;
                this.handleGetAlarmPlans();
            },
            handleClearAlarmPlanSearch() {
                this.alarm_plan_data.client_id = '';
                this.alarm_plan_data.plan_name = '';
                this.alarm_plan_data.plan_enable = '';
                this.alarm_plan_data.plan_email = '';
                this.alarm_plan_data.plan_sms = '';
                this.alarm_plan_data.page_current = 1;
                this.handleGetAlarmPlans();
            },
            handleAlarmPlanPageChange(page_current) {
                this.alarm_plan_data.page_current = page_current;
                this.handleGetAlarmPlans();
            },
            handleAlarmPlanPageSizeChange(page_size) {
                this.alarm_plan_data.page_size = page_size;
                this.alarm_plan_data.page_current = 1;
                this.handleGetAlarmPlans();
            },
            handleGetAlarmPlans() {
                var url = '/get_alarm_plans?page_size=' + this.alarm_plan_data.page_size + '&page_current=' + this.alarm_plan_data.page_current;
                if (this.alarm_plan_data.client_id) {
                    url += '&client_id=' + encodeURIComponent(this.alarm_plan_data.client_id);
                }
                if (this.alarm_plan_data.plan_name) {
                    url += '&plan_name=' + encodeURIComponent(this.alarm_plan_data.plan_name);
                }
                if (this.alarm_plan_data.plan_enable) {
                    url += '&plan_enable=' + encodeURIComponent(this.alarm_plan_data.plan_enable);
                }
                this.$http.get(url).then(res => {
                    this.alarm_plan_data.page_total = res.page_total;
                    let data = res.data;
                    data.forEach(item => {
                        item.plan_enable = item.plan_enable == 1; // 将 plan_enable 转换为布尔值
                        item.plan_noticetype = item.plan_noticetype || ''; // 如果 plan_noticetype 为空，则设置为空字符串
                        item.plan_email = item.plan_noticetype.includes('email'); // 将 plan_email 转换为布尔值
                        item.plan_sms = item.plan_noticetype.includes('sms'); // 将 plan_sms 转换为布尔值
                        item.plan_time = [item.plan_begintime, item.plan_endtime]; // 将 plan_begintime 和 plan_endtime 转换为数组
                    });
                    this.alarm_plan_data.data = data;
                });
            },
    },
    created () {
        this.handleGetAlarmPlans();
    },
}
</script>